<template>
	<view class="bg-white rounded-lg shadow p-20 mb-30">
		<view class="">
			<postCompVue :post="val.poss" :type="4"></postCompVue>
		</view>
		<!-- 解读 -->
		<view class="border-solid border-[transparent] ml-24 border-b-[#F3FAFF] w-40" style="border-width: 20rpx;">
		</view>
		<view class="bg-[#F3FAFF] rounded-lg p-20 relative">
			<text :class="[!isSelf?'multiline-ellipsis-3':'']"><text class="font-bold">解读：</text>{{val.details}}</text>
			<view class="lock">
				<view class="relative z-10">
					<!-- <text class="text-[#329EFF] pr-20">3钻解锁文字内容</text> -->
				</view>
			</view>
		</view>
		<view class="flex justify-end mt-10" v-if="false">
			<view class="py-10 px-20 rounded-full border border-[#3B9BDC] border-solid" @click="handleToTop">
				<text class="text-[#3B9BDC]">取消置顶</text>
			</view>
			<view class="py-10 px-20 rounded-full border border-[#3B9BDC] border-solid ml-20" @click="handleToHide">
				<text class="text-[#3B9BDC]">取消隐藏</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import userApi from '@/apis/apiList/userApi';
	import postCompVue from '@/components/postComp.vue';
	const {
		val,
		isSelf
	} = defineProps(['val', 'isSelf'])
	
	const handleToTop = () => {
		const opt = {
			id: val.id,
			zd: val.zd==0?1:0
		}
		userApi.anchorAnswerZhiding(opt).then(res => {})
	}
	const handleToHide = () => {
		const opt = {
			id: val.id,
			yc: val.yc==0?1:0
		}
		userApi.anchorAnswerYinchang(opt).then(res => {})
	}
</script>

<style lang="scss" scoped>
	.lock {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
		&:before {
			content: '';
			position: absolute;
			right: 0;
			bottom: 0;
			top: 0;
			left: 0;
			background: linear-gradient(-12deg, rgba(221, 232, 252, 0.9), rgba(221, 232, 252, 0.9) 50%, transparent 50%, transparent 100%);
		}
	}
</style>